<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图标菜单栏</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
    <a class="active" href="#"><i class="fa fa-home"></i></a>
    <a href="#"><i class="fa fa-search"></i></a>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a>
</div>
<style>
    body{
        box-sizing: border-box;
        padding: 0;
        margin: 0;

    }
    .icon-bar{
        width: 100%;
    }
    .icon-bar a:not(.active){
        background-color: grey;
        color: white;
        transition: 1s;
    }
    .icon-bar a{

        padding: 12px 0;
        float: left;
        width: 20%;
        text-align: center;
        font-size: 100px;
        padding: 12px 0;
    }
    .active{
        background-color: green;
        color: white;
    }
    .icon-bar a:not(.active):hover{
        background-color: black;
    }
</style>
</body>
</html>
